<template>
  <div class="goods">
    <!-- hello -->

    <!-- 表格头 -->
    <div class="tableHeader">
      <el-input placeholder="请输入内容" class="search">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <span class="mr10"></span>
      <el-button type="success">添加商品</el-button>
      <el-button type="success">
        导出Excel
        <i class="el-icon-download"></i>
      </el-button>
    </div>
    <!-- /表格头 -->

    <!-- 表格内容 -->
    <div class="tableContent">
      <el-table v-loading="loading" border :data="tableData" stripe style="width: 100%">
        <!-- 
                label 列名称
                width 列宽度
                prop  列填充数据（先不管等接口请求
        -->

        <el-table-column prop="goods_id" label="编号" width="50" align="center"></el-table-column>

        <el-table-column prop="goods_name" label="商品名称" width="680"></el-table-column>

        <el-table-column label="商品价格" width="80" prop="goods_price" align="center"></el-table-column>

        <el-table-column label="是否上架" width="80" align="center">
          <template>
            <el-switch></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="是否推荐" width="80" align="center">
          <template>
            <el-switch></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="是否热卖" width="80" align="center">
          <template>
            <el-switch></el-switch>
          </template>
        </el-table-column>

        <el-table-column width="120" fixed="right" label="操作">
          <template slot-scope="scope">
            <!-- scope.row 代表当前行数据 -->
            <!-- <el-button @click="isShowEditTk = true" size="mini" type="danger" icon="el-icon-edit"></el-button> -->
            <el-button @click="editFn(scope.row)" size="mini" type="danger" icon="el-icon-edit"></el-button>
            <el-button
              @click="deleteFn(scope.row.goods_id)"
              size="mini"
              type="info"
              icon="el-icon-delete-solid"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- /表格内容 -->

    <!-- 表格分页 -->
    <div class="tablePage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 100, 200, 300]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataTotal"
      ></el-pagination>
    </div>
    <!-- /表格分页 -->

    <!-- 其他 -->
    <el-dialog title="编辑商品" :visible.sync="isShowEditTk" width="30%" :before-close="handleClose">
      <el-form label-width="120px">
        <el-form-item label="商品名称">
          <el-input v-model="editFormData.goods_name"></el-input>
        </el-form-item>

        <el-form-item label="商品价格">
          <el-input v-model="editFormData.goods_price"></el-input>
        </el-form-item>

        <el-form-item label="商品数量">
          <el-input v-model="editFormData.goods_number"></el-input>
        </el-form-item>

        <el-form-item label="商品重量">
          <el-input v-model="editFormData.goods_weight"></el-input>
        </el-form-item>

        <el-form-item label="商品分类">
          <el-cascader :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
        </el-form-item>
      </el-form>

      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowEditTk = false">取 消</el-button>
        <el-button type="primary" @click="isShowEditTk = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /其他 -->
  </div>
</template>
<script>
// 导入接口
// import  {getGoodsApi} from '@/api/index.js'
import { getGoodsApi, deleteGoodsApi } from "@/api";

//
export default {
  methods: {
    // 编辑
    editFn(row) {
      // add_time: 1586489001 cat_id: null cat_one_id: null
      // cat_three_id: null cat_two_id: null goods_id: 935
      // goods_name: "千锋刘德华"  goods_number: 1 goods_price: 10 goods_state: null
      // goods_weight: 90 hot_mumber: 0 is_promote: false upd_time: 1586489001
      // 1. 将数据同步到模块  -> 模型修改了同步到修改表单
      //   console.log(row)
      this.editFormData = {
        goods_name: row.goods_name,
        id: row.goods_id,
        goods_number: row.goods_number,
        goods_weight: row.goods_weight,
        goods_price: row.goods_price
      };
      // 2. 显示弹框
      this.isShowEditTk = true;
    },
    // 删除
    deleteFn(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 后期会发送异步请求
          deleteGoodsApi(id).then(res => {
            if (res.meta.status == 200) {
              // 1提示
              this.$message.success("删除成功!");
              // 2重新发送异步请求（因为删除成功页面就不需要那一条数据了
              this.initData();
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // 1. 改变模型数据
      this.pagesize = val;
      // 2. 重新发送异步请求
      this.initData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 1. 改变模型数据
      this.pagenum = val;
      // 2. 重新发送异步请求即可
      this.initData();
    },
    // 弹框
    handleChange(value) {
      console.log(value);
    },
    handleClose() {
      //   console.log('this is clode')
      this.isShowEditTk = false;
    },
    // 上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 初始化列表数据
    initData() {
      getGoodsApi({
        pagesize: this.pagesize,
        pagenum: this.pagenum,
        query: this.query
      }).then(res => {
        // console.log(res)
        // 数据同步到模型，模型改变同步到视图
        this.tableData = res.data.goods;
        this.tableDataTotal = res.data.total;
      });
    }
  },
  // 钩子函数
  created() {
    this.initData();
  },
  // 声明模型数据
  data() {
    return {
      // 编辑弹框数据
      editFormData: {
        goods_name: "",
        id: "",
        goods_number: "",
        goods_weight: "",
        goods_price: ""
      },
      // 表格数据
      isShowEditTk: false,
      pagesize: 5,
      pagenum: 1,
      query: "",
      tableDataTotal: 0, // 总数据
      // 表格page
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      // 表格loading
      loading: false,
      // 表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      // 联级选择器数据
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局"
                },
                {
                  value: "color",
                  label: "Color 色彩"
                },
                {
                  value: "typography",
                  label: "Typography 字体"
                },
                {
                  value: "icon",
                  label: "Icon 图标"
                },
                {
                  value: "button",
                  label: "Button 按钮"
                }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框"
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框"
                },
                {
                  value: "input",
                  label: "Input 输入框"
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器"
                },
                {
                  value: "select",
                  label: "Select 选择器"
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器"
                },
                {
                  value: "switch",
                  label: "Switch 开关"
                },
                {
                  value: "slider",
                  label: "Slider 滑块"
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器"
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器"
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器"
                },
                {
                  value: "upload",
                  label: "Upload 上传"
                },
                {
                  value: "rate",
                  label: "Rate 评分"
                },
                {
                  value: "form",
                  label: "Form 表单"
                }
              ]
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格"
                },
                {
                  value: "tag",
                  label: "Tag 标签"
                },
                {
                  value: "progress",
                  label: "Progress 进度条"
                },
                {
                  value: "tree",
                  label: "Tree 树形控件"
                },
                {
                  value: "pagination",
                  label: "Pagination 分页"
                },
                {
                  value: "badge",
                  label: "Badge 标记"
                }
              ]
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告"
                },
                {
                  value: "loading",
                  label: "Loading 加载"
                },
                {
                  value: "message",
                  label: "Message 消息提示"
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框"
                },
                {
                  value: "notification",
                  label: "Notification 通知"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components"
            },
            {
              value: "sketch",
              label: "Sketch Templates"
            },
            {
              value: "jiaohu",
              label: "组件交互文档"
            }
          ]
        }
      ],
      selectedOptions: [],
      selectedOptions2: [],
      // 联级选择器结束

      // 上传图片
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
// goods
.goods {
  width: 96%;
  margin: auto;

  // tableHeader
  .tableHeader {
    width: 100%;
    padding: 10px 0px;
    background: #fff;

    // search
    .search {
      width: 300px;
    }
  }

  // tableContent
  .tableContent {
    margin: 10px 0px;
  }
  // tablePage
  .tablePage {
    width: 100%;
    padding: 10px 0px;
    background: #fff;
  }
}
</style>